<template>
    <div class="left-bar">
        <ul>
            <router-link to="/homepage" @click.native="addPath('/homepage','我的主页');">
                <li :class="{ active: datas=='/homepage' }">
                    <img src="../images/home.png" alt="">
                    <span>我的主页</span>
                </li>
            </router-link>
            <router-link to="/druglistai/stockmanagement" @click.native="addPath('/druglistai/stockmanagement','药品管理');">
                <li :class="{ active: datas=='drugManagment'}">
                    <img src="../images/box.png" alt="">
                    <span>药品管理</span>
                </li>
            </router-link>
            <router-link to="/quality" @click.native="addPath('/quality','质量管理');">
                <li :class="{ active: datas=='/quality'}">
                    <img src="../images/shield.png" alt="">
                    <span>质量管理</span>
                </li>
            </router-link>
            <router-link to="/clientlist" @click.native="addPath('/clientlist','客户管理');">
                <li :class="{ active: datas=='customerManagement' }">
                    <img src="../images/user.png" alt="">
                    <span>客户管理</span>
                </li>
            </router-link>
            <router-link to="/allorders/all" @click.native="addPath('/allorders/all','订单管理');">
                <li :class="{ active: datas=='/allorders' }">
                    <img src="../images/doc.png" alt="">
                    <span>订单管理</span>
                </li>
            </router-link>
            <router-link to="/employees" @click.native="addPath('/employees','员工管理');">
                <li :class="{ active: datas=='/employees' }">
                    <img src="../images/staff.png" alt="">
                    <span>员工管理</span>
                </li>
            </router-link>
            <router-link to="/wealthmain" @click.native="addPath('/wealthmain','钱包管理');">
                <li :class="{ active: datas=='wealthManagement'}">
                    <img src="../images/wealth.png" alt="">
                    <span>钱包管理</span>
                </li>
            </router-link>
            <router-link to="/sale" @click.native="addPath('/finance','财务管理');">
                <li :class="{ active: datas=='/finance'}">
                    <img src="../images/finance.png" alt="">
                    <span>财务管理</span>
                </li>
            </router-link>
            <li @click="opens()">
                <img src="../images/handbag.png" alt="">
                <span>批发商城</span>
            </li>
            <router-link to="/mallstoremgmt/pc" @click.native="addPath('/mallstoremgmt/pc','商城管理');">
                <li :class="{ active: datas=='mallMgmt'}">
                    <img src="../images/handbag.png" alt="">
                    <span>商城管理</span>
                </li>
            </router-link>
            <router-link to="/system" @click.native="addPath('/system','系统设置');">
                <li :class="{ active: datas=='/system' }">
                    <img src="../images/setting.png" alt="">
                    <span>系统设置</span>
                </li>
            </router-link>
            <router-link to="/relations" @click.native="addPath('/relations','资讯中心');">
                <li :class="{ active: datas=='/relations' }">
                    <img src="../images/information.png" alt="">
                    <span>资讯中心</span>
                </li>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
  name: "leftBar",
  data() {
    return {
    };
  },
  props: ["datas"],
  methods: {
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    },
    opens(){
        window.open("#/mall")
    }
  }
};
</script>

<style lang="less" scoped>
@import "../css/var.less";
.left-bar {
  width: 160px;
  height: 1940px;
  background: #33425b;
  font-size: 14px;
  color: #ffffff;
  position: fixed;
  left: 0;
  top: 60px;
  z-index: 100;
  ul {
    li {
      height: 46px;
      line-height: 46px;
      cursor: pointer;
      img {
        margin-right: 10px;
        margin-left: 25px;
      }
      span {
        color: #fff;
      }
    }
    .active {
      background: #2b2e37;
      border-left: 2px solid #009ea3;
      img {
        margin-left: 23px;
      }
    }
    .left-mar-top {
      margin-top: 50px;
    }
  }
}
</style>
